<template>
  <div class="common-choose-users-single">
    <el-button type="text" @click="showDialog" size="medium">{{content}}</el-button>
    <!--选择人员弹窗-->
    <common-edit-dialog
      :title="content !== '请选择' ? '修改人员' : '选择人员'"
      :visible="dialogShow"
      :button-loading="loading"
      width="800px"
      @cancel="cancel"
      @submit="submitForm"
    >
      <div class="dialog-body-content">
        <!--部门数据-->
        <div>
          <common-tree
            class="common-tree-left-list"
            :treeData="deptSelect"
            :treeProp="treeProp"
            :isShowFilter="false"
            is-slot
            @handleNodeClick="handleNodeClick"
          >
            <div
              style="width: 100%;"
              slot-scope="{scope}"
              :class="{ 'e-t-content': !scope.data.freeze }"
            >
              <common-carousel-text
                :content="scope.data.departName"
                :font-size="14"
              >
              </common-carousel-text>
            </div>
          </common-tree>
        </div>

        <!--人员列表-->
        <div class="choose-user-list" v-loading="listLoading">

          <div class="u-l-search">
            <span class="u-l-s-label">用户名</span>
            <common-input v-model="querySelect.realname" placeholder="请输入" clearable/>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
          </div>

<!--          <common-search slot="search" @search="handleQuery" @reset="resetQuery">-->
<!--            <el-form-->
<!--              @submit.native.prevent-->
<!--              :model="querySelect"-->
<!--              ref="queryForm"-->
<!--              v-show="true"-->
<!--              :inline="true"-->
<!--              label-width="47px"-->
<!--            >-->
<!--              <el-form-item label="用户名">-->
<!--                <common-input v-model="querySelect.realname" clearable @enter="handleQuery"/>-->
<!--              </el-form-item>-->
<!--            </el-form>-->
<!--          </common-search>-->

          <div class="u-l-l">
            <common-table slot="content"
                          ref="userList"
                          v-loading="listLoading"
                          :data="userList">
              <el-table-column width="55" align="center">
                <template slot-scope="scope">
                  <el-radio v-model="isCheckUser" :label="scope.row.userName">{{''}}</el-radio>
                </template>
              </el-table-column>
              <el-table-column label="用户名" align="left" prop="userName"/>
              <el-table-column label="姓名" align="left" prop="nickName"/>
              <el-table-column label="手机" align="left" prop="phone"/>
            </common-table>
          </div>


          <pagination
            slot="pagination"
            v-show="total > 0"
            :total="total"
            :page.sync="querySelect.pageNo"
            :limit.sync="querySelect.pageSize"
            :layout="'total, sizes, prev, pager, next'"
            :pager-count="5"
            @pagination="handlerPagination"
          />
        </div>
      </div>

    </common-edit-dialog>
  </div>
</template>

<script>
  import {
    queryDeptTreeList,
    queryUserList,
    queryUserByDepId
  } from '@/api/alarmCenter'
  import { decode, encode } from '@/utils/aesUtils'
  import Utils from '@/utils'

  export default {
    name: 'index',
    props: {
      userInfo: {
        type: Object,
        default: ()  => ({
          userName: '',
          nickName: ''
        })
      }
    },
    data() {
      return {
        content: '请选择',
        dialogShow: false,
        loading: false,
        deptSelect: [],
        treeProp: {
          // 树参数
          children: 'children',
          label: 'departName'
        },
        treeQueryForm: {},
        listLoading: false,
        userList: [],
        querySelect: {
          realname: '',
          id: '',
          pageNo: 1,
          pageSize: 10
        },
        total: 0,
        selectDep: '',//部门
        isCheckUser: '',//选中人员
        isSearch: false
      }
    },
    watch: {
      dialogShow: {
        handler: function(val) {
          this.isSearch = false
          this.querySelect.pageNo = 1
          this.querySelect.pageSize = 10
          this.querySelect.id = ''
          this.querySelect.realname = this.userName
          let userName = this.userInfo && this.userInfo.userName ? this.userInfo.userName : ''
          this.queryUserList(userName)
        }
      },
      userInfo: {
        handler: function(val) {
          this.content = val && val.nickName ? val.nickName : '请选择'
        },
        deep: true
      }
    },
    methods: {
      showDialog() {
        this.dialogShow = true
      },
      cancel() {
        this.dialogShow = false
      },
      //确定
      submitForm() {
        let data = {
          userName: this.isCheckUser,
          depName: this.selectDep ? this.selectDep : this.deptSelect[0].departName
        }
        this.content = this.userList.find(f => f.userName === this.isCheckUser).userName
        this.cancel()
        this.$emit('select', data)
      },
      //选择部门
      handleNodeClick(info) {
        this.isSearch = true
        this.selectDep = info.data.departName
        this.querySelect.pageNo = 1
        this.querySelect.pageSize = 10
        this.querySelect.id = info.data.id || info.data.key || info.data.value
        this.queryUserByDepId()
      },
      handleQuery() {
        this.queryUserByDepId()
      },
      handlerPagination() {
        if (this.isSearch) {
          this.queryUserByDepId()
        } else {
          this.queryUserList()
        }
      },
      //部门数据
      queryDeptTreeList() {
        queryDeptTreeList({ _t: new Date().getTime() }).then(res => {
          if (res && res.code === 200) {
            this.deptSelect = res.rows
          } else {
            this.deptSelect = []
          }
        }).catch(err => this.deptSelect = [])
      },
      //人员列表数据
      queryUserList(val) {
        let params = {
          _t: new Date().getTime(),
          pageNo: this.querySelect.pageNo,
          pageSize: this.querySelect.pageSize
        }
        queryUserList(params).then(res => {
          if (res && res.code === 200) {
            this.userList = res.data.rows.reduce((r, c) => {
              r.push({
                ...c,
                phone: Utils.phoneEncryption(decode(c.phonenumber)),
                decodeEmail: Utils.emailEncryption(decode(c.email))
              })
              return r
            }, [])
            this.total = res.data.total
            // if (val) {
            //   this.$nextTick(() => {
            //     this.isCheckUser = val
            //
            //     console.log(this.isCheckUser)
            //   })
            // }
          } else {
            this.userList = []
          }
        }).catch(err => this.userList = [])
      },
      queryUserByDepId() {
        let params = {
          _t: new Date().getTime(),
          ...this.querySelect
        }
        queryUserByDepId(params).then(res => {
          if (res && res.code === 200) {
            this.userList = res.data.rows.reduce((r, c) => {
              r.push({
                ...c,
                phone: Utils.phoneEncryption(decode(c.phonenumber)),
                decodeEmail: Utils.emailEncryption(decode(c.email))
              })
              return r
            }, [])
            this.total = res.data.total
          } else {
            this.userList = []
          }
        }).catch(err => this.userList = [])
      }
    },
    mounted() {
      this.queryDeptTreeList()
    }
  }
</script>

<style scoped lang="scss">
  .common-choose-users-single {

    .el-button {
      height: 32px;
      padding: 0;
    }

  }
</style>
<style lang="scss">
  .dialog-body-content {
    width: 100%;
    height: 100%;
    display: flex;

    .common-tree-left-list {
      width: 200px !important;
      height: 100% !important;
      border-right: 1px solid #eee;
      overflow-y: scroll;
      box-sizing: border-box;
    }

    .choose-user-list {
      padding-left: 12px;
      width: calc(100% - 200px);
      height: 464px;
      box-sizing: border-box;

      .u-l-search {
        display: flex;
        align-items: center;

        .u-l-s-label {
          width: 68px;
        }

        .common-input {
          width: 200px;
        }

        .el-button {
          margin-left: 20px;
        }
      }


      .u-l-l {
        /*min-height: 250px;*/
        /*height: 383px;*/
        /*flex: 1;*/
        height: calc(100% - 51px - 46px);
        /*position: relative;*/
        /*overflow: hidden;*/
        /*box-sizing: border-box;*/
      }
    }
  }
</style>
